import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar";
import { GitlabIcon } from "@/components/icons/gitlab";
import { useAtom } from "jotai";
import {
  ChevronRight,
  ChevronsDownUp,
  ChevronsUpDown,
  Github,
} from "lucide-react";
import { useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router-dom";

import { navOpenItemsAtom } from "@/atoms/nav";
import { platformAtom } from "@/atoms/platform";
import type { PlatformType } from "@/atoms/platform";
import type { IMenu } from "@/schema/menu";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export function NavMain({ items }: { items: IMenu[] }) {
  const { t } = useTranslation("navigation");
  const location = useLocation();
  const [openItems, setOpenItems] = useAtom(navOpenItemsAtom);
  const [platform, setPlatform] = useAtom(platformAtom);

  const { isPathActive, isParentActive } = useMemo(() => {
    const isPathActive = (path: string) => {
      return (
        location.pathname === path || location.pathname.startsWith(`${path}/`)
      );
    };

    const isParentActive = (item: IMenu) => {
      return item.children?.some((child) => isPathActive(child.to));
    };

    return { isPathActive, isParentActive };
  }, [location.pathname]);

  useEffect(() => {
    const newOpenItems: Record<string, boolean> = { ...openItems };
    let hasChanges = false;

    items.forEach((item) => {
      const shouldBeOpen = isPathActive(item.to) || isParentActive(item);
      if (shouldBeOpen && !newOpenItems[item.title]) {
        newOpenItems[item.title] = true;
        hasChanges = true;
      }
    });

    if (hasChanges) {
      setOpenItems(newOpenItems);
    }
  }, [location.pathname, items, isPathActive, isParentActive]);

  const handleToggle = (title: string) => {
    setOpenItems((prev) => ({
      ...prev,
      [title]: !prev[title],
    }));
  };

  const handleToggleAll = () => {
    const allExpanded = items.every((item) => openItems[item.title]);
    const newOpenItems: Record<string, boolean> = {};

    items.forEach((item) => {
      newOpenItems[item.title] = !allExpanded;
    });

    setOpenItems(newOpenItems);
  };

  const handlePlatformChange = (value: PlatformType) => {
    if (value) {
      setPlatform(value);
    }
  };

  return (
    <SidebarGroup>
      {/* <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <ToggleGroup
            type="single"
            value={platform}
            onValueChange={handlePlatformChange}
            className="flex"
          >
            <ToggleGroupItem
              value="github"
              aria-label="Github"
              className="h-7 w-7 p-0"
            >
              <Github className="size-4" />
            </ToggleGroupItem>
            <ToggleGroupItem
              value="gitlab"
              aria-label="Gitlab"
              className="h-7 w-7 p-0"
            >
              <GitlabIcon className="size-4" />
            </ToggleGroupItem>
          </ToggleGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
        </div>
        <Button
          type="button"
          size="icon"
          variant="ghost"
          onClick={handleToggleAll}
          className="rounded-md p-1 hover:bg-muted"
          title={
            items.every((item) => openItems[item.title])
              ? "Collapse all"
              : "Expand all"
          }
        >
          {items.every((item) => openItems[item.title]) ? (
            <ChevronsDownUp className="size-4" />
          ) : (
            <ChevronsUpDown className="size-4" />
          )}
        </Button>
      </div> */}
      <SidebarMenu>
        {items.map((item) => (
          <Collapsible
            key={item.title}
            asChild
            open={openItems[item.title]}
            onOpenChange={() => handleToggle(item.title)}
          >
            <SidebarMenuItem>
              <SidebarMenuButton
                asChild
                tooltip={t(item.title)}
                data-active={item.children ? false : isPathActive(item.to)}
              >
                <Link to={item.to}>
                  <item.icon />
                  <span>{t(item.title)}</span>
                </Link>
              </SidebarMenuButton>
              {item.children?.length ? (
                <>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuAction className="data-[state=open]:rotate-90">
                      <ChevronRight />
                      <span className="sr-only">Toggle</span>
                    </SidebarMenuAction>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.children?.map((subItem) => (
                        <SidebarMenuSubItem key={subItem.title}>
                          <SidebarMenuSubButton
                            asChild
                            data-active={isPathActive(subItem.to)}
                          >
                            <Link to={subItem.to}>
                              <span>{t(subItem.title)}</span>
                            </Link>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </>
              ) : null}
            </SidebarMenuItem>
          </Collapsible>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}
